@import '@material/radio/mixins.import';
@import '@material/radio/variables.import';
@import '@material/form-field/mixins.import';
@import '../mdc-helpers/mdc-helpers';
@import '../../cdk/a11y/a11y';
@import '../../material/core/style/layout-common';

@include mdc-radio-without-ripple($query: $mat-base-styles-query);
@include mdc-form-field-core-styles($query: $mat-base-styles-query);

// This is necessary because we do not depend on MDC's ripple, but have our own that should be
// positioned correctly. This can be removed once we start using MDC's ripple implementation.
.mat-mdc-radio-button .mat-radio-ripple {
  @include mat-fill;

  pointer-events: none;
  border-radius: 50%;

  .mat-ripple-element:not(.mat-radio-persistent-ripple) {
    opacity: $mdc-radio-ripple-opacity;
  }
}

// Note that this creates a square box around the circle, however it's consistent with
// how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border
// into a dotted one, because it's too thick which causes the circles to look off.
@include cdk-high-contrast {
  .mat-mdc-radio-button.cdk-keyboard-focused .mat-radio-ripple {
    outline: dotted 1px;
  }
}
